<template>
  <div>

    <el-input v-model="size"></el-input>
    <el-input v-model="color"></el-input>
    <el-button @click="add()">添加</el-button>
    <table border="1"
           cellpadding="0"
           cellspacing="0"
           class="Table">
      <tr>
        <th>尺寸</th>
        <th>颜色</th>
      </tr>
      <tr v-for='(item,index) in tableData'
          :key="index">
        <td>{{item.size}}</td>
        <td>
          <div class="merge"
               v-for="(it,i) in item.rows"
               :key="i">{{it.color}}</div>
        </td>
      </tr>
      <tr v-show='tableData.length<1'
          class="nothing">
        <td colspan='2'>暂无数据</td>
      </tr>
    </table>
  </div>
</template>
<script>
import Tab from "./components/table"
export default {
  components: { Tab },
  data () {
    return {
      tableData: [

      ],
      size: '',
      color: '',

      tmp: [],
      spanAll: [],
      findIndex: 0,

      value: 3
    }
  },
  methods: {
    add () {
      let obj = {
        color: this.color
      }
      let findIndex = this.tableData.findIndex(v => {
        return v.size === this.size
      })
      if (findIndex != -1) {
        this.tableData[findIndex].rows.push(Object.assign({}, obj))
      } else {
        this.tableData.push({
          size: this.size,
          rows: [obj]
        })
      }
    },

  },

  mounted () {

  },


}
</script>

<style >
.Table {
  width: 70%;
  text-align: center;
}
.Table th:first-child {
  border-right: none;
}
.Table {
  border: 1px solid #ebeef5;
  border-left: 0;
  border-right: 0;
}
.Table th {
  border: 1px solid #ebeef5;
  line-height: 40px;
  border-bottom: none;
  border-top: none;
}
.Table {
  color: #909399 !important;
  font-weight: 500;
  font-size: 14px;
}
.Table td:first-child {
}
.Table td {
  border: 1px solid #ebeef5;
  border-bottom: none;
}
.merge:first-child {
  border-top: none;
}
.merge {
  border-top: 1px solid #ebeef5;
  line-height: 25px;
}
.nothing {
  line-height: 50px;
}
</style>
